<template>
  <div class="answers_list">
    <p class="answers_title">{{ robotInfo.robotName }}猜您想要咨询的问题是：</p>
    <ul class="bubble_list">
      <template v-for="list in levelTitleList">
        <template v-for="listItem in restructureData(answersData.data)">
          <template v-if="list.key === listItem.category && list.label === listItem.level1Title">
            <li>
              <h3 class="bubble_title">{{ listItem.level1Title }}</h3>
              <ul class="bubble_list_ul">
                <li v-for="items in listItem.list" :key="items.id">
                  <span @click="handleChildrenCon(items)">{{ items.question }}</span>
                </li>
              </ul>
            </li>
          </template>

        </template>
      </template>


    </ul>
  </div>
</template>

<script>
import {setQueryById} from "@/utils/setChatStoreData";

export default {
  name: 'AnswersList',
  props: ['robotInfo', 'answersData'],
  data() {
    return {
      "levelTitleList": this.$store.state.levelTitleList,
    }
  },
  methods: {
    //重组数据
    restructureData(ArrayList) {
      let temp = [];
      let newData = [];
      ArrayList.forEach(item => {
        temp[item.level1Title] = temp[item.level1Title] || [];
        temp[item.level1Title].push(item);
      })
      for (let key in temp) {
        let obj = {};
        obj.level1Title = key;
        obj.category = temp[key][0].category;
        obj.list = temp[key];
        newData.push(obj);
      }

      return newData;
    },
    // 根据id查询子级内容
    handleChildrenCon(obj) {
      const {id, question} = obj;
      setQueryById(this, id, question);
    },
  }
}
</script>
